<template>
    <div id="fen" v-if="Lists.length">
        <header>分类</header>
        <div class="zhuye">
            <div class="fenye" v-for="item in Lists" :key="item.categoryId">
                <div>
                    <img :src="item.categoryImage" v-lazy="item.categoryImage">
                </div>
                <div class="zhanshi">
                    <div v-for="items in item.productList" :key="items.productId" class="zhanshiye" @click="listdelfoo(items.productId)">
                        <img :src="items.image"  v-lazy="items.image">
                        <p>{{items.name}}</p>
                        <span>¥ {{items.salePrice}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)
export default {
  data () {
    return {
      Lists: []
    }
  },
  mounted () {
    http({
      url: '/heihei/json/mobile/cate-home.json?c=h5&s=20000&t=1605094239726&v=1.0'
    }).then(res => {
      this.Lists = res.data.data.cateHome
    //   console.log(this.Lists)
    })
  },
  methods: {
    listdelfoo (id) {
      this.$router.push({ path: '/pages/detail/detail', query: { id: id } })
    //  console.log(this.$router)
    }
  }
}
</script>
<style lang="scss" scoped>
    #fen{
        background-color: #fff;
        header{
            height: 48px;
            text-align: center;
            line-height: 48px;
            position: fixed;
            background-color: #fff;
            top: 0;
            left: 0;
            right: 0;
            border-bottom: 1px solid #ccc;
            z-index: 88;
        }
        .zhuye{
                        margin-top: 48px;
            .fenye{
                        padding: 10px 10px 0 10px;
                        overflow: hidden;
                 div{
                     img{
                         width: 100%;
                         margin-bottom: 15px;
                     }
                 }
                 .zhanshi{
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 5px;
                        margin-bottom: 10px;
                     .zhanshiye{
                         padding: 0 5px;
                         flex: 0 0 33.33333%;
                         overflow: hidden;
                         margin-bottom: 15px;
                         max-width: 33.33333%;
                         img{
                             margin-bottom: 0;
                         }
                         p{
                             text-overflow: ellipsis;
                             margin: 10px 0;
                            text-align: center;
                            color: #262626;
                            width: 100%;
                            font-size: 13px;
                            overflow: hidden;
                            white-space: nowrap;
                         }
                         span{
                             font-size: 15px;
                             display: block;
                             text-align: center;
                             color: #eb4949;
                             font-weight: 700;
                         }
                     }
                 }
            }
        }

    }
</style>
